<template>
  <div class="pc-activity-page">
    <div class="eltabs">
      <div
        v-for="(item, index) in tablist"
        @click="getStatus(index)"
        :class="{ active: index === activIndex }"
        :key="index"
        class="taitem"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 活动列表区域 -->
    <el-container>
      <el-main>
        <div v-if="filteredActivities.length > 0" class="activity-list">
          <el-card
            v-for="(item, index) in filteredActivities"
            :key="index"
            class="activity-card"
            shadow="hover"
            @click="goToDetail(item)"
          >
            <!-- 活动状态标签 -->
            <el-tag :type="item.status === 1 ? 'success' : 'info'" class="card-status">
              {{ item.status === 1 ? '进行中' : '已结束' }}
            </el-tag>
            <!-- 活动图片 -->
            <img :src="item.image_url" class="card-image" alt="活动图" />
            <!-- 活动内容 -->
            <div class="card-content">
              <div class="card-title">{{ item.title }}</div>
              <div class="time">
                <i class="el-icon-time"></i>
                <span>{{ item.start_time }}</span>
                --
                <span>{{ item.end_time }}</span>
              </div>
              <div class="card-desc">{{ item.description }}</div>
              <div class="card-box">
                <div class="cardboxpeop">888人参与</div>
                <div><el-button @click="getDetail(item.activity_id)" class="cardboxbtn">立即参与</el-button></div>
              </div>
            </div>
          </el-card>
        </div>
        <!-- 空状态 -->
        <el-empty v-else description="暂无活动" />
      </el-main>
    </el-container>
    <el-dialog
      title="春日动漫角色设计大赛"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="900px"
      custom-class="custom-activity-dialog"
    >
      <div @click="dialogVisible = false">
        <el-button class="iconback" type="primary" icon="el-icon-back">返回</el-button>
      </div>

      <div class="dio_header">
        <div class="title">{{ magInfo.title }}</div>
        <div>
          <el-tabs v-model="activeExploreTab" @tab-click="changeTab">
            <el-tab-pane label="活动信息" name="0" />
            <el-tab-pane label="活动作品" name="1" />
            <el-tab-pane label="作品排名" name="2" />
            <el-tab-pane label="结束公示" name="3" />
          </el-tabs>
        </div>
      </div>
      <div v-if="activeExploreTab === '0'" class="diobox">
        <div class="diobox_one">
          <div class="one_time">活动时间</div>
          <div class="one_mer">
            <i class="el-icon-time"></i>
            {{ magInfo.start_time }}---{{ magInfo.end_time }}
          </div>
        </div>
        <div class="diobox_one">
          <div class="one_time">活动描述</div>
          <div class="one_mer">
            {{ magInfo.description }}
          </div>
        </div>
        <div class="diobox_one">
          <div class="one_time">参与方式</div>
          <div class="one_mer">
            {{ magInfo.conditions }}
          </div>
        </div>
        <div class="diobox_one">
          <div class="one_time">获奖信息</div>
          <div class="one_box">
            <div v-for="(item, index) in magInfo.setting" :key="index" class="onebox_item">
              <div class="item_top">{{ item.prize_name }}</div>
              <div class="item_btm">{{ item.prize_desc }}</div>
            </div>
          </div>
        </div>
        <div class="btnget">立即参与创作</div>
      </div>
      <div v-if="activeExploreTab === '1'" class="diobox" @scroll="handleScroll">
        <div class="secrbox">
          <el-input placeholder="搜索作品ID或关键词..." @input="handleSearchInput" v-model="search">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="works-container">
          <div class="work-item" v-for="(item, index) in serchList" :key="index">
            <el-image class="work-image" :src="item.newImgs[0]" :preview-src-list="item.newImgs" fit="cover" />
            <div class="work-info">
              <h3 class="work-title">{{ item.title }}</h3>
              <p class="work-id">ID: {{ item.work_id }}</p>
              <div class="rating-like">
                <span>
                  <span class="iconfont icon-a-shoucangyishoucang1x leftshouc"></span>
                  <span class="share">{{ item.share_count }}</span>
                </span>
                <el-button type="text" class="like-btn">
                  <i class="iconfont icon-shoucangyishoucang" style="color: #c674e2"></i>
                  点赞
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeExploreTab === '2'" class="diobox" @scroll="handleScroll">
        <div class="tab-le">
          <el-table :data="serchList" style="width: 100%; background: transparent">
            <el-table-column type="index" label="排名" width="80">
              <template slot-scope="scope">
                <div
                  class="custom-rank"
                  :class="{ bga: scope.$index == 0, bgb: scope.$index == 1, bgc: scope.$index == 2 }"
                >
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="作品" width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.images">
                  <el-image class="woimage" :src="scope.row.images[0].url" fit="cover" />
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="" width="210" />
            <el-table-column prop="name" label="作者" />
            <el-table-column prop="scored" label="得分" />
            <el-table-column prop="pos" label="票数" />
          </el-table>
        </div>
      </div>
      <div v-if="activeExploreTab === '3'" class="diobox">
        <div v-if="overInfo.id"></div>
        <el-empty v-else description="暂无结束的活动" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 假设接口请求方法与小程序保持一致（需根据实际项目调整引入方式）
import { activitiesList, getInfo, getHuodong, rankings, settle } from '@/api/active'

export default {
  data() {
    return {
      activities: [], // 活动列表原始数据
      activIndex: 0, // 活动列表原始数据
      loading: false, // 下拉刷新loading
      dialogVisible: false,
      activeTab: 'info',
      activeExploreTab: '0',
      search: '',
      cursor: 0,
      limit: 10,
      loadMore: false,
      noMore: false,
      serchList: [],
      magInfo: {},
      overInfo: {},
      rankStyles: {
        1: { bg: '#FFD700', color: '#fff' },
        2: { bg: '#C0C0C0', color: '#fff' },
        3: { bg: '#CD7F32', color: '#fff' },
        default: { bg: '#f5f5f5', color: '#333' },
      },
      tablist: [
        {
          name: '全部活动',
          id: 0,
        },
        {
          name: '未开始',
          id: 1,
        },
        {
          name: '进行中',
          id: 2,
        },
        {
          name: '已结束',
          id: 3,
        },
      ],
    }
  },
  computed: {
    // 过滤“进行中”的活动（因需求去除tab，默认只展示进行中）
    filteredActivities() {
      return this.activities.filter(item => item.status === 1)
    },
  },
  mounted() {
    this.getActivityList()
  },
  methods: {
    getStatus(index) {
      this.activIndex = index
    },
    changeTab(e) {
      if (e.name === '1' || e.name === '2') {
        this.cursor = 0
        this.noMore = false
        this.getHuo()
      }
      if (e.name === '3') {
        this.getsettle()
      }
    },
    // 搜索框内容变化时重置分页
    handleSearchInput() {
      this.cursor = 0
      this.noMore = false
      this.getHuo()
    },
    // 滚动监听：判断是否滚动到底部
    handleScroll(e) {
      if (this.activeExploreTab !== '1' && this.activeExploreTab !== '2') return // 仅在作品标签页生效

      const container = e.target
      // 容器滚动到底部的判断条件：滚动高度 + 容器可视高度 >= 内容总高度
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
        this.getHuo() // 触发加载下一页
      }
    },
    // 查询活动排行榜
    // 获取活动列表
    async getActivityList() {
      this.loading = true
      const { code, data, msg } = await activitiesList()
      this.loading = false
      if (code === 200) {
        this.activities = data || []
      } else {
        this.$message.error(msg)
      }
    },
    async getsettle() {
      const param = {
        activity_id: this.magInfo.activity_id,
      }
      const res = await settle(param)
      console.log(res, '6666')
    },
    // 查询活动作品  活动排行榜
    async getHuo() {
      if (this.loadMore || this.noMore) return // 防止重复请求或无更多数据时请求
      this.loadMore = true
      const param = {
        activity_id: this.magInfo.activity_id,
        search: this.search,
        cursor: this.search ? 0 : this.cursor,
        limit: this.limit,
      }
      let res = null
      if (this.activeExploreTab === '2') {
        res = await rankings(param)
      } else {
        res = await getHuodong(param)
      }
      this.loadMore = false
      if (res.code === 200) {
        const { items, next_cursor } = res.data
        // 追加数据（首次请求则直接赋值）
        this.serchList = this.cursor === 0 ? items : [...this.serchList, ...items]
        if (this.activeExploreTab === '1') {
          this.serchList.forEach(el => {
            if (!el.newImgs) {
              el.newImgs = []
              el.images.forEach(e => {
                el.newImgs.push(e.url)
              })
            }
          })
        }

        // 判断是否还有更多数据
        this.noMore = next_cursor === 0
        // 更新下一页游标
        this.cursor = next_cursor
      } else {
        this.$message.error(res.msg || '加载失败')
      }
    },
    async getDetail(val) {
      const param = {
        activity_id: val,
      }
      const res = await getInfo(param)
      this.magInfo = res.data
      this.dialogVisible = true
      console.log(res, '888')
    },
    // 跳转到活动详情页（PC端可跳转新页面或弹窗，这里示例为路由跳转）
    goToDetail(item) {
      this.$router.push({
        path: '/activityDetail',
        query: { activity_id: item.activity_id },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.pc-activity-page {
  width: 100%;
  height: 100%;
  padding: 20px;
  padding-top: 40px;
  //   background: rgba(26, 31, 46, 0.95);

  .activity-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 30px;
  }

  .activity-card {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
  }

  .card-status {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
  }

  .card-image {
    width: 100%;
    height: 192px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
  }

  .card-content {
    padding: 15px 20px;
    background-color: rgb(31 41 55);
    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
      color: rgb(216 180 254);
    }
    .time {
      color: #fff;
      font-size: 14px;
    }
    .card-desc {
      font-size: 16px;
      color: #d1d5d8;
      margin-top: 10px;
      line-height: 1.5;
    }
    .card-box {
      display: flex;
      margin-top: 20px;
      justify-content: space-between;
      .cardboxpeop {
        color: #c084fc;
      }
      .cardboxbtn {
        color: #fff;
        border: 0;
        background-image: linear-gradient(to right, #a855f7, #ec4899);
      }
    }
  }
}
.eltabs {
  display: flex;
  width: 360px;
  height: 40px;
  margin: auto;
  line-height: 40px;
  font-size: 14px;
  border-radius: 20px;
  // overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  .taitem {
    width: 90px;
    text-align: center;
    height: 40px;
    color: #d8b4fe;
    cursor: pointer;
  }
  .active {
    background-image: linear-gradient(to right, #a855f7, #ec4899);
    color: #fff;
  }
}
::v-deep .el-card__body {
  padding: 0;
  border: 0;
}
::v-deep .el-card {
  border: 0;
  border-radius: 0;
}
// -------------------弹框样式
.custom-activity-dialog {
  border-radius: 30px;
  padding: 0 30px;
  .dio_header {
    width: 100%;
    height: 150px;
    padding: 0 30px;
    padding-top: 30px;
    background-image: linear-gradient(to right, #9333ea, #db2777);
    .title {
      width: 100%;
      text-align: center;

      font-size: 24px;
      flex: 1;
    }
    .el-tabs {
      margin-top: 30px;
    }
  }
  .diobox {
    padding: 30px;
    height: 600px;
    overflow: hidden;
    overflow: auto;
    background-color: #1f2937;
    -webkit-scrollbar: 0;
    &::-webkit-scrollbar {
      display: none;
    }
    .diobox_one {
      margin-bottom: 20px;
      padding: 30px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.1);
      .one_time {
        font-size: 18px;
        font-weight: 700;
        color: #d8b4fe;
        margin-bottom: 20px;
      }
      .one_mer {
        font-size: 16px;
        // color: #e9d5fe;
      }
      .one_box {
        display: flex;
        justify-content: space-between;
        .onebox_item {
          width: 47%;
          padding: 20px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.1);
          .item_top {
            color: #d8b4fe;
          }
          .item_btm {
            margin-top: 10px;
          }
        }
      }
    }
    .secrbox {
      width: 500px;
    }
    .btnget {
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin: auto;
      border-radius: 5px;
      background-image: linear-gradient(to right, #9333ea, #db2777);
    }
  }
  .iconback {
    position: absolute;
    left: 30px;
    top: 30px;
    color: #fff;
    border: 0;
    margin: auto;
    font-size: 16px;
    background-color: rgb(255 255 255 / 20%);
  }
}
::v-deep .el-dialog__header {
  display: none;
}
::v-deep .el-dialog__body {
  padding: 0;
  border-radius: 20px;
}
::v-deep .el-tabs__active-bar {
  display: inline-block;
  background-color: #fff;
  margin-left: -3px;
  // background-color: transparent !important;
  width: 70px !important;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0 !important;
  position: static !important;
}
::v-deep .el-input__inner {
  border-color: #7c3aed;
  outline: none;
}
.works-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.work-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.work-image {
  width: 100%;
  height: 200px; /* 可根据需求调整图片高度 */
}

.work-info {
  padding: 12px;
}

.work-title {
  font-size: 16px;
  color: #7c3aed;
  margin: 0 0 8px 0;
}

.work-id {
  font-size: 14px;
  color: #666;
  margin: 0 0 10px 0;
}

.rating-like {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .leftshouc {
    color: #eab308;
  }
  .share {
    margin-left: 5px;
    color: #eab308;
  }
}

.rating {
  font-size: 14px;
  color: #666;
}

.like-btn {
  color: #c674e2 !important;
  padding: 0 !important;
}
.woimage {
  width: 100px;
  height: 100px;
}
.custom-rank {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto; /* 居中 */
}
.bga {
  background-color: #ffd700;
  color: #fff;
}
.bgb {
  background-color: #c0c0c0;
  color: #fff;
}
.bgc {
  background-color: #cd7f32;
  color: #fff;
}
.tab-le ::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  border: none;
}
// .tab-le ::v-deep .el-table tr {
//   background-color: transparent !important;
//   border: none;
// }
// .tab-le ::v-deep .el-table--enable-row-transition .el-table__body td,
// .el-table .cell {
//   background-color: transparent;
//   border: none;
// }
// .tab-le ::v-deep .el-table__row > td {
//   border: none;
// }
// /* 清除底部横线 */
// .el-table::before {
//   height: 0px;
// }
// .tab-le >>> .el-table th.is-leaf {
//   /* 去除上边框 */
//   border: none;
// }
</style>
